/**
 * 两个处理时间的第三方库：
 * (1) [Moment.js](https://momentjs.com/)
 * (2) [Day.js](https://day.js.org/)
 *
 * 两者都是专门用于处理时间的 JavaScript 库, 功能差不多, 因为 Day.js 的设计就是参考的 Moment.js
 * 但是 Day.js 相比 Moment.js 的包体积要更小一些, 因为它采用了插件化的处理方式
 */

/**
 * [Day.js](https://day.js.org/zh-CN/) 是一个轻量的处理时间和日期的 JavaScript 库
 * [Moment.js](https://momentjs.com/) 的 API 设计保持完全一样
 *
 * (1) Day.js 可以运行在浏览器和 Node.js 中
 * (2) 🕒 和 Moment.js 相同的 API 和用法
 * (3) 💪 不可变数据 (Immutable)
 * (4) 🔥 支持链式操作 (Chainable)
 * (5) 🌐 国际化 I18n
 * (6) 📦 仅 2kb 大小的微型库
 * (7) 👫 全浏览器兼容
 */

import Vue from 'vue'
import dayjs from 'dayjs'

// 加载中文语言包
import 'dayjs/locale/zh-cn'

import relativeTime from 'dayjs/plugin/relativeTime'

// 配置使用处理相对时间的插件
dayjs.extend(relativeTime)

// 配置使用中文语言包
dayjs.locale('zh-cn')

// 全局过滤器：处理相对时间
/**
 * 定义一个全局过滤器, 然后就可以在任何组件的模板中使用了
 * 其实过滤器就相当于一个全局可用的方法（仅供模板使用）
 * 参数1：过滤器名称
 * 参数2：过滤器函数
 * 使用方式：{{ 表达式 | 过滤器名称 }}
 * 管道符前面的表达式的结果会作为参数传递到过滤器函数中
 * 过滤器的返回值会渲染到使用过滤器的模板位置
 */
Vue.filter('relativeTime', value => {
  return dayjs().to(dayjs(value))
})

export const formatDate = value => dayjs(value).format('YYYY-MM-DD')
